<template>
  <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      :size="formSize"
      class="demo-ruleForm"
      label-width="70px"
      status-icon
      style="width: 280px"
  >
    <div style="font-size: 22px; text-align: center; margin-bottom: 50px">
      登录
    </div>

    <el-form-item label="用户名" prop="username">
      <el-input v-model="ruleForm.username"/>
    </el-form-item>

    <el-form-item label="密码" prop="password">
      <el-input
          v-model="ruleForm.password"
          clearable
          show-password
          type="password"
      />
    </el-form-item>

    <el-button
        style="width: 100%"
        type="success"
        @click="submitForm(ruleFormRef)"
    >登录
    </el-button
    >

    <el-divider>登录/注册</el-divider>

    <el-button style="width: 100%" type="warning" @click="GoRegister"
    >注册
    </el-button
    >
  </el-form>
</template>

<script lang="ts" setup>
import router from "@/router";
import {reactive, ref} from "vue";
import type {FormInstance, FormRules} from "element-plus";
import {ElMessage} from "element-plus";
import axios from "axios";

const token = localStorage.getItem("doctor-auth-token");
const check = () => {
  axios
      .post("/api/auth/check/医生", null, {headers: {token}})
      .then((res) => {
        console.log(res);
        if (res.data.success) {
          localStorage.setItem("doctor-auth-token", res.data.message);
          router.push("/doctor/rescue-info");
        } else {
          ElMessage({
            message: res.data.message,
            type: "error",
          });
          setTimeout(() => {
            router.push("/auth/login");
          }, 300);
        }
      })
      .catch((err) => {
        console.log(err);
        ElMessage({
          message: "network error",
          type: "error",
        });
        setTimeout(() => {
          router.push("/auth/login");
        }, 300);
      });
};
check();

interface RuleForm {
  username: string;
  password: string;
}

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  username: "",
  password: "",
});
const rules = reactive<FormRules<RuleForm>>({
  username: [
    {required: true, message: "请输入你的账号名称", trigger: "blur"},
    {min: 1, max: 25, message: "长度应<25", trigger: "blur"},
  ],
  password: [{required: true, message: "请输入你的密码", trigger: "blur"}],
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      axios
          .post("/api/auth/login", {
            username: ruleForm.username,
            password: ruleForm.password,
          })
          .then((res) => {
            console.log(res);
            if (res.data.success) {
              ElMessage({
                message: "登录成功",
                type: "success",
              });
              localStorage.setItem("doctor-auth-token", res.data.message);
              setTimeout(() => {
                router.push("/doctor/user-info");
              }, 800);
            } else {
              ElMessage({
                message: res.data.message,
                type: "error",
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({length: 10000}).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));

const GoRegister = () => {
  router.push("/auth/register");
};
</script>

<style lang="scss" scoped></style>
